<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody">
    <template #search="{ search }">
      <ElFormItemBox label="单据状态" prop="saleOrderGroupState">
        <ElSelectBox :data="search" dataName="saleOrderGroupState" :all="{
          label: '全部',
          value: -1
        }" :options="options.orderState" />
      </ElFormItemBox>
      <ElFormItemBox label="开单时间">
        <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
      </ElFormItemBox>
    </template>
    <template #headL>
      <el-link @click="() => {
        dataInfo.table.search.saleOrderGroupState = 0
        getTbody()
      }">{{ `待确认订单(${dataInfo.pendingConfirmationOrder})` }}</el-link>
    </template>
    <template #item="{ row }">
      <div class="orderBox">
        <div class="orderBox-operation orderBox-header">
          <div class="orderBox-operation-l list-r-12">
            <dl class="w190" @click="setSearch('saleOrderGroupNumber')">
              <dt>订单单号：</dt>
              <dd>{{ row.saleOrderGroupNumber }}</dd>
            </dl>
            <dl>
              <dt>订单状态：</dt>
              <dd>
                <ElTagBox :data="row.saleOrderGroupState" :options="options.orderState" />
              </dd>
            </dl>
            <dl @click="setSearch('CreateOrderPerson')">
              <dt>开单人员：</dt>
              <dd>{{ row.creatorName }}</dd>
            </dl>
            <dl>
              <dt>订单总额：</dt>
              <dd>{{ row.hasEditPower ? `${row.orderTotalAmount}元` : "无权查看" }}</dd>
            </dl>
          </div>
          <div class="orderBox-operation-r list-r-8">
            <template v-for="(item, index) in dataInfo.table.operation">
              <el-divider direction="vertical" v-if="index !== 0" />
              <el-link :disabled="typeof item.disabled === 'function' ? item.disabled(row) : item.disabled"
                @click="item.click(row)">{{ typeof
                  item.title === 'function' ? item.title(row) : item.title
                }}</el-link>
            </template>
          </div>
        </div>
        <div class="orderBox-main">
          <dl class="orderBox-item" :class="{
            isDisabled: item.isDisabled === 1
          }" v-for="item in row.saleOrderList">
            <dt>
              <ElImgBox :data="item.productColorDraftFileList[0]" :urlList="item.productColorDraftFileList"
                urlKey="draftFileUrl" :width="120" />
            </dt>
            <dd class="list-b-8">
              <div class="flex-start-center list-r-8">
                <h3 @click="setSearch('productName')">{{ item.orderProduct?.productName }}</h3>
                <el-tag size="small" effect="dark" type="danger" v-if="item.isDisabled === 1">已作废</el-tag>
              </div>
              <FlexBox :margin="2" class="dlText-80">
                <dl>
                  <dt>产品类型</dt>
                  <dd>{{ item.orderProduct?.productTypeName || '--' }}</dd>
                </dl>
                <dl @click="setSearch('productNumber')">
                  <dt>产品编码</dt>
                  <dd>{{ item.orderProduct?.productNumber || '--' }}</dd>
                </dl>
                <dl>
                  <dt>产品版本</dt>
                  <dd>{{ `v${item.orderProduct?.updateVersion + 1}` }}</dd>
                </dl>
                <dl>
                  <dt>产品尺寸</dt>
                  <dd>{{ item.orderProduct?.productSize || '--' }}</dd>
                </dl>
                <dl @click="setSearch('customerName')">
                  <dt>客户名称</dt>
                  <dd>{{ row.customerName || '--' }}</dd>
                </dl>
                <dl @click="setSearch('xieYiShuHao')">
                  <dt>协议书号</dt>
                  <dd>{{ item.xieYiShuHao || '--' }}</dd>
                </dl>
                <dl>
                  <dt>下单时间</dt>
                  <dd>{{ row.createTime || '--' }}</dd>
                </dl>
                <dl>
                  <dt>交货日期</dt>
                  <dd>{{ proxy.$day(item.deliveryDate) }}</dd>
                </dl>
                <dl @click="setSearch('customerBillNo')">
                  <dt>客户单号</dt>
                  <dd>{{ item.customerBillNo || '--' }}</dd>
                </dl>
                <dl>
                  <dt>数据数量</dt>
                  <dd>{{ item.dataQuantity || '--' }}</dd>
                </dl>
                <dl>
                  <dt>下单数量</dt>
                  <dd>{{ item.productQuantity || '--' }}</dd>
                </dl>
                <dl>
                  <dt>产品单价</dt>
                  <dd>{{ row.hasEditPower ? `${item.unitPrice}元` : '无权查看' }}</dd>
                </dl>
                <dl>
                  <dt>订单总价</dt>
                  <dd>{{ row.hasEditPower ? `${item.totalAmount}元` : '无权查看' }}</dd>
                </dl>
              </FlexBox>
              <el-divider />
              <div class="orderBox-operation">
                <div class="orderBox-operation-l">
                  <dl>
                    <dt>数据状态：</dt>
                    <dd>
                      <ElTagBox :data="item.dataBillState" :options="options.dataBillState" effect="light" />
                    </dd>
                  </dl>
                  <dl>
                    <dt>缴库状态：</dt>
                    <dd>
                      <ElTagBox :data="item.handInState" :options="options.handInState" effect="light" />
                    </dd>
                  </dl>
                  <dl>
                    <dt>发货状态：</dt>
                    <dd>
                      <ElTagBox :data="item.deliverState" :options="options.deliverState" effect="light" />
                    </dd>
                  </dl>
                  <dl>
                    <dt>生产状态：</dt>
                    <dd>
                      <ElTagBox :data="item.productionState" :options="options.productionState" effect="light" />
                    </dd>
                  </dl>
                  <dl>
                    <dt>生产进度：</dt>
                    <dd>
                      <WordProgress :progress="item.progress" :list="item.productionProgressList" />
                    </dd>
                  </dl>
                </div>
                <div class="orderBox-operation-r" v-if="item.isDisabled !== 1">
                  <el-dropdown>
                    <el-link icon="Printer">打印交货单</el-link>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <PrintOrder title="直接打印" :item="{
                            ...item,
                            customerName: row.customerName,
                            saleOrderGroupNumber: row.saleOrderGroupNumber,
                            creatorName: row.creatorName,
                          }" />
                        </el-dropdown-item>
                        <el-dropdown-item @click="openPup({
                          ...item,
                          customerName: row.customerName,
                          saleOrderGroupNumber: row.saleOrderGroupNumber,
                          creatorName: row.creatorName,
                        })">编辑后打印</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>

                  <template
                    v-if="item.isDisabled !== -1 && item.dataBillState === 0 && item.handInState === 0 && item.deliverState === 0 && item.productionState === 0">
                    <el-divider direction="vertical" />
                    <el-link icon="Remove" @click.stop="() => {
                      proxy.$messageBox('是否作废当前产品，请确认！', () => {
                        proxy.$api.OrderBusniess.UpdateSaleOrderIsDisabled({
                          saleOrderCode: row.saleOrderCode,//唯一编码
                          isDisabled: 1,//是否作废，0-未作废、1-已作废
                        })
                          .then((res: any) => {
                            proxy.$message(`作废成功`);
                            getTbody();
                          })
                          .catch(() => { });
                      });
                    }">作废</el-link>
                  </template>
                  <el-divider direction="vertical" />
                  <el-tooltip class="box-item" effect="dark" content="产品已经开始生产,禁止编辑" placement="top"
                    :disabled="item.productionState === 0">
                    <el-link icon="Edit" @click="editBtn(item)" :disabled="item.productionState !== 0">编辑</el-link>
                  </el-tooltip>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </template>
  </PageBox>
  <ElPupFormBox :pup="pup">
    <template #default="{ form }">
      <ElFormItemBox label="客户名称" prop="customerName">
        <ElInputBox :data="form" dataName="customerName" />
      </ElFormItemBox>
      <ElFormItemBox label="订单单号" prop="saleOrderGroupNumber">
        <ElInputBox :data="form" dataName="saleOrderGroupNumber" />
      </ElFormItemBox>
      <ElFormItemBox label="协议书号" prop="xieYiShuHao">
        <ElInputBox :data="form" dataName="xieYiShuHao" />
      </ElFormItemBox>
      <ElFormItemBox label="产品名称" prop="orderProduct.xieYiShuHao">
        <ElInputBox :data="form.orderProduct" dataName="productName" />
      </ElFormItemBox>
      <ElFormItemBox label="产品编号" prop="orderProduct.NumberhuHao">
        <ElInputBox :data="form.orderProduct" dataName="productNumber" />
      </ElFormItemBox>
      <ElFormItemBox label="产品类型" prop="orderProduct.productTypeName">
        <ElInputBox :data="form.orderProduct" dataName="productTypeName" />
      </ElFormItemBox>
      <ElFormItemBox label="产品尺寸" prop="orderProduct.productSize">
        <ElInputBox :data="form.orderProduct" dataName="productSize" />
      </ElFormItemBox>
      <ElFormItemBox label="产品数量" prop="productQuantity">
        <ElInputBox :data="form" dataName="productQuantity" />
      </ElFormItemBox>
      <ElFormItemBox label="产品单位" prop="orderProduct.productUnit">
        <ElInputBox :data="form.orderProduct" dataName="productUnit" />
      </ElFormItemBox>
      <ElFormItemBox label="交货日期" prop="deliveryDate">
        <ElDayBox :data="form" dataName="deliveryDate" />
      </ElFormItemBox>
      <ElFormItemBox label="下单人员" prop="creatorName">
        <ElInputBox :data="form" dataName="creatorName" />
      </ElFormItemBox>
    </template>
    <template #footR>
      <PrintOrder title="确认打印" isButton :item="pup.form" />
    </template>
  </ElPupFormBox>
</template>

<script setup lang="ts">
import './pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
import PrintOrder from './PrintOrder.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const props = withDefaults(
  defineProps<{
    search?: any; //单选
    query?: any; //单选
  }>(),
  {
  },
);
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo, getTbody, options, getPath } = useListComponent(props);
const setSearch = (queryDataBaseFiled: string = 'saleOrderGroupNumber') => {
  dataInfo.table.search.queryDataBaseFiled = queryDataBaseFiled
}

const openPup = (row: any) => {
  pup.state = true
  pup.form = JSON.parse(JSON.stringify(row))
  console.log(pup);
}

const pup = reactive({
  state: false,
  typeName: 2,
  title: `库存交货单`,
  width: 600,
  height: 'auto',
  form: {
    oldPassWord: '',//原密码
    newPassWord: '',//新密码
  },
});
const editBtn = (row: any) => {
  getPath({
    path: `${route.path}/details`,
    query: {
      type: 2,
      saleOrderGroupCode: row.saleOrderGroupCode,
      xieYiShuHao: row.xieYiShuHao,
    },
  });
}
</script>
